<!--'常用材料的S-N曲线与海夫图'-->
<template>
  <div class="sum" style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto">
    <a-row align="top" justify="left" style="height: 100%;" type="flex">
      <a-col :span="12" class="left_col" style="height: 100%; ">
        <div class="div_left" style="width: 97%;height: 108%;margin-top: 1.5%;margin-left: 2%;border-radius: 3px">
          <div class="div_left_up" style="width: 100%;height: 40%;">
            <div class="div_left_title_up title"><strong><label class="title1">输入参数</label></strong></div>
            <div style="display: flex;font-size:16px;padding-top: 1.5%;padding-bottom: 0.8%;width: 100%;height: 100%;padding-left: 2%;padding-right: 2%;">
              <div style="display: flex;width: 50%;padding-left: 2%;">
                <div style="width: 60%;height: 99%;padding-left: 5%;padding-right: 5%;padding-top: 1%">
                  <ul >
                    <li>S_N曲线类型</li>
                    <li>材料类型</li>
                    <li v-if="params_01.SNType == 2">抗拉强度壁厚效应</li>
                    <li>材料抗拉强度(MPa)</li>
                    <li>材料屈服强度(MPa)</li>
                    <li>材料试验类型</li>
                    <li v-if="params_01.SNType == 2">零件壁厚(mm)</li>
                    <li>延伸率</li>
                  </ul>
                </div>
                <div style="width: 40%;height: 99%;padding-left: 0%;padding-right: 5%;padding-top: 1%">
                  <ul  >
                    <li>
                      <!--                      <select v-model="params_05.SNType" >-->
                      <select v-model="params_01.SNType" >
                        <option value="1">材料</option>
                        <option value="2">零件</option>
                      </select>
                    </li>
                    <li>
                      <select v-model="params_01.MatType" >
                        <option value="1">合金钢</option>
                        <option value="2">铸钢</option>
                        <option value="3">球墨铸铁</option>
                        <option value="4">灰铸铁</option>
                      </select>
                    </li>
                    <li  v-if="params_01.SNType == 2">
                      <select v-model="params_01.Thick_Effect" >
                        <option value="1">是</option>
                        <option value="2">否</option>
                      </select>
                    </li>
                    <li><input v-model="params_01.Rm"></li>
                    <li><input v-model="params_01.Rp"></li>
                    <li>
                      <select v-model="params_01.TestType" >
                        <option value="1">标准</option>
                        <option value="2">拉伸</option>
                      </select>
                    </li>
                    <li  v-if="params_01.SNType == 2"><input v-model="params_01.t"></li>
                    <li><input v-model="params_01.extend"></li>
                  </ul>
                </div>
              </div>
              <div style="display: flex;width: 50%;padding-left: 2%">
                <div style="width: 60%;height: 100%;padding-left: 2%;padding-top: 1%">
                  <ul>
                    <li >
                      可靠度(%)
                    </li>
                    <li>局部安全系数</li>
                    <li>S-N曲线应力比</li>
                    <li v-if="params_01.SNType == 2">零件表面粗糙度Rz(um)</li>
                    <li v-if="params_01.SNType == 2">应力集中系数</li>
                    <li v-if="params_01.SNType == 2">支撑系数</li>
                    <li v-if="params_01.MatType >= 3">铸件质量等级</li>
                    <li v-if="params_01.MatType >= 3">铸件检测方法</li>
                  </ul>
                </div>
                <div style="width: 40%;height: 99%;padding-left: 2%;padding-right: 5%;padding-top: 1%">
                  <ul>
                    <li style="text-align: center">97.5</li>
                    <li><input v-model="params_01.gama_M"></li>
                    <li><input v-model="params_01.R"></li>
                    <li v-if="params_01.SNType == 2"><input v-model="params_01.Rz"></li>
                    <li v-if="params_01.SNType == 2"><input v-model="params_01.aerf_K"></li>
                    <li v-if="params_01.SNType == 2"><input v-model="params_01.n"></li>
                    <li v-if="params_01.MatType >= 3">
                      <select v-model="params_01.j" style="border-radius: 2px">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                      </select>
                    </li>
                    <li v-if="params_01.MatType >= 3">
                      <select v-model="params_01.TestMethod">
                        <option value="1">超声波(UT)或射线(RT)</option>
                        <option value="2">液体渗透(PT)或磁粉表面探伤(MT)</option>
                      </select>
                    </li>
                    <li></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div style="height: 60%;display: flex;width: 100%;margin-top: 2%;height: 49%;margin-bottom: 5%">
            <div class="div_left_down" style="width: 100%;height: 100%;margin-right:2%;">
              <div class="div_left_title_up title" style="width: 100%"><strong><label class="title1">输出结果</label></strong></div>
              <div style="width: 100%;height: 38%">
                <strong> <label style="height: 25px ;font-size: 15px;margin-left: 15px">S-N曲线输出参数</label></strong>
                <div style="display: flex;font-size: 13px;background-color: #F2F2F2;border-radius: 3px;margin-left: 5%;width: 90%">
                  <ul style="width: 55%;text-align: right;border-radius: 3px;margin-left:10%">
                    <li style="height: 15px">S-N曲线斜率m1</li>
                    <li style="height: 15px">S-N曲线斜率m2</li>
                    <li style="height: 15px">修正后的S.N曲线疲劳极限拐点处应力幅值Ao^A</li>
                    <li style="height: 15px">S-N曲线低周疲劳拐点处应力幅值0a1</li>
                    <li style="height: 15px"> S-N曲线疲劳极限拐点处载荷循环次数ND</li>
                    <li style="height: 15px">S.N曲线低周疲劳拐点处载荷循环次数N1</li>
                  </ul>
                  <ul style="width:25%;text-align: center;font-size:13px;margin-left:3%;border-radius: 3px;padding-left: 5%;margin-right: 10%">

                    <!--                    <li style="height: 15px">{{ output_1.m2 }}</li>-->
                    <!--                    <li style="height: 15px">{{ output_1.m2 }}</li>-->
                    <li style="height: 15px">{{ output_1[0] }}</li>
                    <li style="height: 15px">{{ output_1[1] }}</li>
                    <li style="height: 15px"> {{ output_1[2]}}</li>
                    <li style="height: 15px">{{ output_1[3] }}</li>
                    <li style="height: 15px"> {{ output_1[4]}}</li>
                    <li style="height: 15px">{{ output_1[5] }}</li>
                  </ul>
                </div>

                <a-modal  v-model="isloading" title="计算中..." @ok="handleOk">
                  <a-spin  tip="计算中...">
                    <div class="spin-content">
                      计算时间可能有点长，请耐心等待。。。
                    </div>
                  </a-spin>
                </a-modal>

              </div>
              <div style="width: 100%;height: 61%;margin-bottom: 10%">
                <strong> <label style="height: 25px ;font-size: 15px;margin-left: 15px">海夫图输出参数</label></strong>
                <div style="font-size: 13px;background-color: #F2F2F2;border-radius: 3px;margin-left: 5%;width: 90%;">
                  <div class="div_table" style="height: 98%">
                    <table style=" width: 100%; height: 100%;text-align: center;">
                      <tr>
                        <th>点位置</th>
                        <th>σm</th>
                        <th>σa</th>
                      </tr>
                      <tr>
                        <td>A</td>
                        <td>{{ output_1[6] }}</td>
                        <td>{{ output_1[7]}}</td>
                      </tr>
                      <tr>
                        <td>B</td>
                        <td>{{ output_1[8] }}</td>
                        <td>{{ output_1[9]}}</td>
                      </tr>
                      <tr>
                        <td>C</td>
                        <td>{{ output_1[10] }}</td>
                        <td>{{ output_1[11] }}</td>
                      </tr>
                      <tr>
                        <td>D</td>
                        <td>{{ output_1[12]}}</td>
                        <td>{{ output_1[13] }}</td>
                      </tr>
                      <tr>
                        <td>F</td>
                        <td>{{ output_1[14] }}</td>
                        <td>{{ output_1[15] }}</td>
                      </tr>
                      <tr>
                        <td>G</td>
                        <td>{{ output_1[18]}}</td>
                        <td>{{ output_1[19] }}</td>
                      </tr>
                      <tr>
                        <td>H</td>
                        <td>{{ output_1[20] }}</td>
                        <td>{{ output_1[21] }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <button class="comp1" @click="tclick_01" style="width:15%;height: 8% ">计算</button>

          </div>
        </div>
      </a-col>
      <a-col :span="12" class="left_col" style="height: 100%;">
        <div class="fig_right" style="width: 95%;height: 100%;padding-top: 1.5%;margin-left: 2%">
          <div class="fig_rightup" style="width: 100%;height: 50%;margin-bottom: 2.5%">
            <div class="div_left_title_up title"><strong><label class="title1">S-N曲线参考图样</label></strong></div>
            <div style="width: 100%;height: 80%;padding-top: 1.5%;padding-left: 5%">
              <img alt="S-N曲线参考图样" class="img_1" style="height: 115% "
                   src="@/assets/image/S-N_pic.png">
            </div>
          </div>
          <div class="fig_rightdown" style="width: 100%;height: 45%">
            <div class="div_left_a_up title"><strong><label class="title1">海夫图参考图样</label></strong></div>
            <div style="width: 100%;height: 80%;padding-top: 1.5%;padding-left: 8%">
              <img alt="海夫图参考图样" class="img_1" style="height: 110%"
                   src="@/assets/image/HaiFu_pig.png">
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

  </div>
</template>

<script>
import {deletefile,comp_material_SNHF} from "@/api/file";
// import {request} from "@/utils/request";

export default {

  mounted() {
    window.onbeforeunload = e => {      //刷新时弹出提示
      deletefile(this.$store.state.file.dataList[1])
          .then(res => {
            console.log("打印结果");
            console.log(res)
            this.output_1= res
            console.log(this.output_1)
            console.log(this.output_1[0])
            // this.output_1.m1= res[0]
          })
          .catch(err => {
            this.$message.error(err);
          });

    };
  },
  created() {
    document.title = '常用材料的S-N曲线与海夫图'
    this.$store.state.file.key = 1
  },
  name: "material_SNHF",
  data() {
    return {
      isloading:false,
      params_01:this.$store.state.file.dataList[1],
      output_1:{
        m1:6,
        m2: 0,
        _3: 0,
        _4: 0,
        _5: 0,
        _6: 0,
        detaA:1,
        deta1:2,
        ND:3,
        N1:2,
        Ma :1,
        Aa :1,
        Mb :1,
        Ab :1,
        Mc :1,
        Ac :1,
        Md :1,
        Ad :1,
        Mf :1,
        Af :1,
        Mg :1,
        Ag :1,
        Mh :1,
        Ah :1,
      },
    }
  },
  methods: {
    handleOk(){
      this.isloading=false
    },

    tclick_01() {
      this.isloading=true

        console.log(this.$store.state.file.dataList[1].Rm)
        comp_material_SNHF(this.$store.state.file.dataList[1])
            .then(res => {
              console.log("打印结果");
              console.log(res)
              this.output_1= res
              console.log(this.output_1)
              console.log(this.output_1[0])
              // this.output_1.m1= res[0]
            })
            .catch(err => {
              this.$message.error(err);
            });

      this.isloading=false
      },
  }
};
</script>

<style scoped>

tr:hover{
  border-radius: 2px;
  background-color: #ddd;
}
.title {
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 17.5px;
  background-color: #D7D7D7;
  border-radius: 3px;
  padding-left: 3%;
  font-weight: bolder;
}
.div_left_down {
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.div_left_up{
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.fig_rightup{
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
.fig_rightdown{
  border: 0.5px solid rgba(231, 231, 231, 0.486);
  border-radius: 5px;
  box-shadow: 2px 2px 3px #aaaaaa;
}
input{
  width: 80%;
  height: 88%;
  text-align: center;
  border:1px solid #D7D7D7;
}
select{
  width: 80%;
  height: 88%;
  border-radius: 2px;
  text-align: center;
}
button{
  wifth: 10%;
  padding-left: 26px;
  padding-right: 26px;
  background-color: #6dd400;
  border-radius: 4px;
  border: 2px #686868;
}

ul{
  height: 37.5%;
}
li{
  height: 30%;
  list-style-type: none;
}
</style>